<!--
 * @Description: 驾驶舱
 * @FilePath: \hk-computerRoom-Security\src\views\home\index.vue
 * @Date: 2024-01-15 16:37:47
 * @LastEditTime: 2024-02-05 11:33:47
-->
<template>
	<div class="home-container">
		<HomeHead v-if="isTagsViewCurrenFull" @refresh="state.isFullScreen = false"></HomeHead>
		<div class="home-main">
			<div class="left-content">
				<!-- <div class="energy-from">
					<el-form :inline="true" :model="state.searchForm" ref="searchRef" size="default">
						<el-form-item label="类型" prop="energyTypeId">
							<el-select v-model="state.searchForm.energyTypeId" placeholder="请选择能源类型" clearable>
								<el-option label="1" :value="1" />
							</el-select>
						</el-form-item>
						<el-form-item label="楼栋" prop="buildingId">
							<el-select v-model="state.searchForm.buildingId" placeholder="请选择所在楼栋" clearable>
								<el-option label="1" :value="1" />
							</el-select>
						</el-form-item>
						<el-form-item label="楼层" prop="floorId">
							<el-select v-model="state.searchForm.floorId" placeholder="请选择所在楼层" clearable>
								<el-option label="1" :value="1" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<div class="btn2">
								<el-icon> <ele-Search /> </el-icon><span class="ml6">查询</span>
							</div>
							<div class="btn3 ml10">
								<el-icon> <ele-Refresh /> </el-icon><span class="ml6">重置</span>
							</div>
						</el-form-item>
					</el-form>
				</div> -->
				<div class="info-list">
					<div class="info-box">
						<img src="../../assets/images/computerRoomStatistics/wangguanicon.svg" alt="" class="info-img" />
						<div class="info-text">
							<div class="info-name">网关总数</div>
							<div class="info-count">
								<span>{{ state.deviceCount.gateway_total_num }}</span>
								<span class="info-unit">台</span>
							</div>
						</div>
					</div>
					<div class="info-box">
						<img src="../../assets/images/computerRoomStatistics/deviceicon.svg" alt="" class="info-img" />
						<div class="info-text">
							<div class="info-name">设备总数</div>
							<div class="info-count">
								<span>{{ state.deviceCount.device_total_num }}</span>
								<span class="info-unit">台</span>
							</div>
						</div>
					</div>
					<div class="info-box">
						<img src="../../assets/images/computerRoomStatistics/deviceicon1.svg" alt="" class="info-img" />
						<div class="info-text">
							<div class="info-name">设备在线数</div>
							<div class="info-count">
								<span>{{ state.deviceCount.device_online_num }}</span>
								<span class="info-unit">台</span>
							</div>
						</div>
					</div>
					<div class="info-box">
						<img src="../../assets/images/computerRoomStatistics/loushuiicon.svg" alt="" class="info-img" />
						<div class="info-text">
							<div class="info-name">漏水报警设备数</div>
							<div class="info-count">
								<span>{{ state.deviceCount.device_leakage_alarm_num }}</span>
								<span class="info-unit">台</span>
							</div>
						</div>
					</div>
					<div class="info-box">
						<img src="../../assets/images/computerRoomStatistics/wenduicon.svg" alt="" class="info-img" />
						<div class="info-text">
							<div class="info-name">温度报警设备数</div>
							<div class="info-count">
								<span>{{ state.deviceCount.device_temperature_alarm_num }}</span>
								<span class="info-unit">台</span>
							</div>
						</div>
					</div>
				</div>

				<!-- <div class="model-area mt10 pl10" :class="state.selected === '机房1' ? 'room1' : 'room2'"> -->
				<div class="model-area">
					<ThreeD class="threeD-box"></ThreeD>
					<div v-if="!state.isFullScreen" class="fullScreen" @click="state.isFullScreen = true">全屏</div>
					<div class="change-room">
						<div class="room-item" @click="state.selected = '机房1'">
							<img src="../../../src/assets/images/home/icon-open.svg" alt="" v-if="state.selected === '机房1'" />
							<img src="../../../src/assets/images/home/icon-close.svg" alt="" v-else />
							<div :class="state.selected === '机房1' ? 'room-title' : ''">机房1</div>
						</div>
						<div class="room-item" @click="state.selected = '机房2'">
							<img src="../../../src/assets/images/home/icon-open.svg" alt="" v-if="state.selected === '机房2'" />
							<img src="../../../src/assets/images/home/icon-close.svg" alt="" v-else />
							<div :class="state.selected === '机房2' ? 'room-title' : ''">机房2</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-content">
				<EchartLeakage class="echarts-box"></EchartLeakage>
				<EchartTemperature class="echarts-box"></EchartTemperature>
				<AlarmHistory class="echarts-box"></AlarmHistory>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, defineAsyncComponent, watch, onMounted } from 'vue';
import EchartLeakage from './component/echat-leakage.vue';
import EchartTemperature from './component/echat-temperature.vue';
import AlarmHistory from './component/alarm-history.vue';
import ThreeD from './component/threeD.vue';
import { useDataBoardApi } from '/@/api/dataBoard';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { storeToRefs } from 'pinia';
const tagsViewRoutesStore = useTagsViewRoutes();
const { isTagsViewCurrenFull } = storeToRefs(tagsViewRoutesStore);
const HomeHead = defineAsyncComponent(() => import('/@/views/home/component/home-head.vue'));

const state = reactive({
	isFullScreen: true, // 是否全屏
	// searchForm: {
	// 	energyTypeId: '', // 能源类型
	// 	buildingId: '', // 楼栋
	// 	floorId: '', // 楼层
	// },
	selected: '机房1',
	deviceCount: {
		gateway_total_num: 0,
		device_total_num: 0,
		device_online_num: 0,
		device_leakage_alarm_num: 0,
		device_temperature_alarm_num: 0,
	},
});
onMounted(async () => {
	queryDeviceCount();
});

// 获取区域列表
const queryDeviceCount = async () => {
	const { data } = await useDataBoardApi().queryDeviceCount({
		// energyTypeCode: '',
		// organizationId: '',
	});
	state.deviceCount = data;
};

watch(
	() => state.isFullScreen,
	(newVal: boolean) => {
		tagsViewRoutesStore.setCurrenFullscreen(newVal);
	},
	{
		immediate: true,
	}
);
</script>

<style scoped lang="scss">
.home-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	color: #fff;
	overflow: hidden;
	.home-main {
		display: flex;
		flex: 1;
		padding: 10px 15px;
		overflow: hidden;
		.left-content {
			width: 75%;
			display: flex;
			flex-direction: column;
			.info-list {
				width: 100%;
				height: 130px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-box {
					display: flex;
					align-items: center;
					// width: 280px;
					width: 20%;
					margin-right: 10px;
					height: 100%;
					background-image: url('../../assets/images/home/box-bg.svg');
					background-size: 100% 100%;

					.info-img {
						width: 60px;
						height: 60px;
						margin: 0px 25px 0px 32px;
					}

					.info-text {
						height: 60px;

						.info-name {
							font-size: 16px;
							color: #397bff;
						}

						.info-count {
							font-size: 30px;
							font-weight: bold;
							color: #ffffff;

							.info-unit {
								font-size: 12px;
								font-weight: bold;
								color: #f1f6ff;
							}
						}
					}
				}
			}

			.model-area {
				flex: 1;
				position: relative;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				.threeD-box {
					width: 100%;
					height: 98%;
				}

				.fullScreen {
					position: absolute;
					left: 0px;
					bottom: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100px;
					height: 30px;
					background-image: url('../../assets/images/home/home-return.svg');
					background-size: 100% 100%;
					font-size: 24px;
					font-family: YouShe;
					color: #c1e1ff;
					line-height: 28px;
					letter-spacing: 2px;
					cursor: pointer;
				}

				.change-room {
					position: absolute;
					left: 0px;
					top: 20px;

					.room-item {
						margin-bottom: 10px;
						font-size: 14px;
						color: #2e579a;
						.room-title {
							color: #c3daff;
						}
					}
				}
			}

			.room1 {
				background-image: url('../../../src/assets/images/home/room1.svg');
				background-size: 100% 100%;
			}

			.room2 {
				background-image: url('../../../src/assets/images/home/room2.svg');
				background-size: 100% 100%;
			}
		}

		.right-content {
			// flex: 1;
			width: 25%;
			height: 100%;
			background: rgba(0, 88, 220, 0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;

			.echarts-box {
				width: 100%;
				height: 33%;
				overflow: hidden;
			}
		}
	}
}
</style>
